<template>
  <el-card class="announcement-card" shadow="hover" :class="{ 'is-pinned': announcement.isPinned }">
    <!-- 公告头部 -->
    <div class="card-header">
      <div class="announcement-info">
        <div class="announcement-title">
          <h3>{{ announcement.title }}</h3>
          <el-tag 
            v-if="announcement.isPinned" 
            type="danger" 
            size="small"
            effect="dark"
          >
            {{ $t('project.pinned') }}
          </el-tag>
        </div>
        <div class="announcement-meta">
          <div class="creator-info">
            <el-avatar
              v-if="creator"
              :size="24"
              :src="creator.avatarUrl"
            >
              {{ (creator.username || creator.nickname || 'U')?.charAt(0).toUpperCase() }}
            </el-avatar>
            <span>{{ creator?.username || creator?.nickname || $t('project.unknownUser') }}</span>
          </div>
          <div class="time-info">
            <el-icon><Clock /></el-icon>
            <span>{{ formatRelativeTime(announcement.createdAt) }}</span>
          </div>
        </div>
      </div>
      
      <div class="card-actions" v-if="canManage">
        <el-dropdown trigger="click" @command="handleCommand">
          <el-button :icon="MoreFilled" size="small" text />
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item 
                v-if="!announcement.isPinned"
                command="pin" 
                :icon="Top"
              >
                {{ $t('project.pinAnnouncement') }}
              </el-dropdown-item>
              <el-dropdown-item 
                v-else
                command="unpin" 
                :icon="Bottom"
              >
                {{ $t('project.unpinAnnouncement') }}
              </el-dropdown-item>
              <el-dropdown-item command="edit" :icon="Edit">
                {{ $t('common.edit') }}
              </el-dropdown-item>
              <el-dropdown-item command="delete" :icon="Delete" divided>
                {{ $t('common.delete') }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>

    <!-- 公告内容 -->
    <div class="card-content">
      <div class="announcement-content" v-html="formattedContent"></div>
    </div>

    <!-- 公告底部 -->
    <div class="card-footer">
      <div class="footer-actions">
        <el-button 
          type="primary" 
          text 
          size="small"
          @click="toggleExpand"
        >
          {{ isExpanded ? $t('project.showLess') : $t('project.showMore') }}
        </el-button>
      </div>
      <div class="footer-info">
        <span>{{ $t('common.updated') }}: {{ formatRelativeTime(announcement.updatedAt) }}</span>
      </div>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useI18n } from 'vue-i18n'
import {
  MoreFilled,
  Edit,
  Delete,
  Top,
  Bottom,
  Clock
} from '@element-plus/icons-vue'
import type { Announcement } from '@/types/project'
import { formatRelativeTime } from '@/utils/date'
import { marked } from 'marked'
import DOMPurify from 'dompurify'

// Props
interface Props {
  announcement: Announcement
  canManage: boolean
  teamMembers: Array<{
    userId: number
    username?: string
    nickname?: string
    avatarUrl?: string
    role: string
    status: string
  }>
}

const props = defineProps<Props>()

// Emits
const emit = defineEmits<{
  edit: [announcement: Announcement]
  delete: [announcement: Announcement]
  pin: [announcement: Announcement]
  unpin: [announcement: Announcement]
}>()

const { t } = useI18n()

// 响应式数据
const isExpanded = ref(false)

// 计算属性
const creator = computed(() => {
  if (!props.announcement.creatorId) return null
  return props.teamMembers.find(member => member.userId === props.announcement.creatorId)
})

const formattedContent = computed(() => {
  const content = props.announcement.content || ''
  
  // 如果内容太长且未展开，则截断
  let processedContent = content
  if (!isExpanded.value && content.length > 300) {
    processedContent = content.substring(0, 300) + '...'
  }
  
  // 将Markdown转换为HTML并净化
  try {
    const html = marked(processedContent)
    return DOMPurify.sanitize(html)
  } catch (error) {
    console.error('Markdown解析错误:', error)
    return processedContent
  }
})

// 方法
const toggleExpand = () => {
  isExpanded.value = !isExpanded.value
}

const handleCommand = (command: string) => {
  switch (command) {
    case 'edit':
      emit('edit', props.announcement)
      break
    case 'delete':
      emit('delete', props.announcement)
      break
    case 'pin':
      emit('pin', props.announcement)
      break
    case 'unpin':
      emit('unpin', props.announcement)
      break
  }
}
</script>

<style scoped lang="scss">
.announcement-card {
  margin-bottom: 16px;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-2px);
  }

  &.is-pinned {
    border-left: 4px solid var(--el-color-danger);
    background-color: var(--el-color-danger-light-9);
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;

    .announcement-info {
      flex: 1;

      .announcement-title {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 8px;

        h3 {
          margin: 0;
          font-size: 18px;
          font-weight: 600;
          color: var(--el-text-color-primary);
          line-height: 1.4;
        }
      }

      .announcement-meta {
        display: flex;
        align-items: center;
        gap: 16px;
        font-size: 14px;
        color: var(--el-text-color-secondary);

        .creator-info,
        .time-info {
          display: flex;
          align-items: center;
          gap: 6px;
        }
      }
    }

    .card-actions {
      opacity: 0;
      transition: opacity 0.3s ease;
    }
  }

  &:hover .card-actions {
    opacity: 1;
  }

  .card-content {
    margin-bottom: 16px;

    .announcement-content {
      font-size: 14px;
      line-height: 1.6;
      color: var(--el-text-color-regular);

      :deep(p) {
        margin: 0 0 12px 0;
      }

      :deep(ul), :deep(ol) {
        margin: 0 0 12px 0;
        padding-left: 24px;
      }

      :deep(h1), :deep(h2), :deep(h3), :deep(h4), :deep(h5), :deep(h6) {
        margin: 16px 0 8px 0;
        font-weight: 600;
        line-height: 1.4;
      }

      :deep(h1) {
        font-size: 20px;
      }

      :deep(h2) {
        font-size: 18px;
      }

      :deep(h3) {
        font-size: 16px;
      }

      :deep(h4), :deep(h5), :deep(h6) {
        font-size: 14px;
      }

      :deep(blockquote) {
        margin: 0 0 12px 0;
        padding: 8px 16px;
        border-left: 4px solid var(--el-border-color);
        background-color: var(--el-bg-color-page);
      }

      :deep(code) {
        padding: 2px 4px;
        background-color: var(--el-bg-color-page);
        border-radius: 4px;
        font-family: monospace;
      }

      :deep(pre) {
        margin: 0 0 12px 0;
        padding: 12px;
        background-color: var(--el-bg-color-page);
        border-radius: 4px;
        overflow-x: auto;

        code {
          padding: 0;
          background-color: transparent;
        }
      }

      :deep(a) {
        color: var(--el-color-primary);
        text-decoration: none;

        &:hover {
          text-decoration: underline;
        }
      }

      :deep(img) {
        max-width: 100%;
        height: auto;
        border-radius: 4px;
      }

      :deep(table) {
        width: 100%;
        border-collapse: collapse;
        margin: 0 0 12px 0;

        th, td {
          padding: 8px;
          border: 1px solid var(--el-border-color);
          text-align: left;
        }

        th {
          background-color: var(--el-bg-color-page);
          font-weight: 600;
        }
      }
    }
  }

  .card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid var(--el-border-color-lighter);

    .footer-info {
      font-size: 12px;
      color: var(--el-text-color-placeholder);
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .announcement-card {
    .card-header {
      .announcement-info {
        .announcement-meta {
          flex-direction: column;
          align-items: flex-start;
          gap: 8px;
        }
      }
    }

    .card-footer {
      flex-direction: column;
      gap: 12px;
      align-items: flex-start;
    }
  }
}
</style>
